<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="module" src="./js/twin/szls-stream.js"></script>
  <script type="module" src="./js/twin/api.render.js"></script>
  <link rel="stylesheet" href="./js/progressbar/css/index.css"/>
  <link rel="stylesheet" href="./js/progressbar/css/ui.progress-bar.css"/>
  <link rel="stylesheet" href="./js/progressbar/css/ui.css"/>
</head>
<body>
<div class="progressbar_div" id="progressbar_div">
  <div id="progress_bar" class="ui-progress-bar ui-container">
    <div class="ui-progress" style="width: 0;">
      <span class="ui-label"><b class="value">0%</b></span>
    </div>
  </div>
</div>

<video is="szls-stream" audio id="" class="ps-player"></video>
</body>
<script type="module">
  import mainStore from './js/mainStore.js';

  document.addEventListener('DOMContentLoaded', (event) => {
    initScene()
  })

  const initScene = () => {
    const twinParam = JSON.parse(localStorage.getItem('twinParam'));
    if (twinParam) {
      mainStore.setPixelStreamSrc(twinParam.pixelStreamSrc || 'pixel-stream-src');
      // mainStore.setPixelStreamSrc('ws://10.8.37.212:8888' || 'pixel-stream-src');
      mainStore.setSenceId(twinParam.senceId || 'sence_id')
      const videoElement = document.querySelector(".ps-player");
      if (videoElement) {
        videoElement.id = mainStore.pixelStreamSrc;
      }
    } else {
      console.error('twinParam not found in localStorage');
    }

    if (mainStore.pixelStreamSrc !== '') {
      window.ps.addEventListener("playerqueue", (res) => {
        // 获取排队人数, 减1表示减掉当前连接数
        if (res.detail.seq > 0) {
          res.detail.seq--
        }
        let resData = res.detail;
        console.log(`当前排队人数有${resData.seq !== undefined && resData.seq > 0 ? resData.seq : 0}人`);
        if (resData.type === 'playerqueue') {
        }
      })

      // 场景开始渲染时，在该事件之后才能安全发送ps.emitMessage()
      window.ps.addEventListener("playing", (res) => {
        if (res.type === 'playing') {
          window.KCDT.sendCommd((e) => {});
        }
      })

      // 引擎资源满了，或者场景像素流地址有错与引擎连接失败监听
      window.ps.addEventListener("playerdisconnected", (res) => {
        if (res.type === 'playerdisconnected') {

        }
      })

      //与引擎保持连接中监听
      window.ps.addEventListener("ping", (res) => {
        if (res.type === 'ping') {

        }
      })
    }
  }
  const initProgressBar = () => {
    mainStore.initProgressBarDom('progressbar_div');
    mainStore.setProgressBarDomDisplay(true);
    mainStore.setProgressPerscent(65);
    initScene();
  };


</script>

</html>
